<template>
      <ContentBase>
        <div class="row">
          <div class="col-9">
            <h3 style="font-weight: bold;">Echarts-Show</h3>
          </div>
        </div>
        <hr class="border border-primary border-1 opacity-75">
        <div class="row">
          <div class="col">
            <div class="card">
              <div class="card-body">
                <div class="row text-center">
                  Topic实时数据
                  <div class="col">
                      <TopicDataView style="width: 600px;height: 300px"></TopicDataView>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <br>

        <div class="row">
          <div class="col">
            <div class="card">
              <div class="card-body">
                <div class="row text-center">
                  按State统计NameAmount
                  <div class="col">
                    <StatisticStateByName style="width: 800px;height: 600px"></StatisticStateByName>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <br>

        <div class="row">
          <div class="col">
            <div class="card">
              <div class="card-body">
                <div class="row text-center">
                  按ID统计Amount
                  <div class="col">
                    <StatisticById style="width: 850px;height: 600px"></StatisticById>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <br>

        <div class="row">
          <div class="col">
            <div class="card">
              <div class="card-body">
                <div class="row text-center">
                  按ID统计StateAmount
                  <div class="col">
                    <StatisticStateById style="width: 850px;height: 600px"></StatisticStateById>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <br>

        <div class="row">
          <div class="col">
            <div class="card">
              <div class="card-body">
                <div class="row text-center">
                  按ID统计State
                  <div class="col">
                    <amountIdState style="width: 800px;height: 600px"></amountIdState>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <br>

        <div class="row">
          <div class="col">
            <div class="card">
              <div class="card-body">
                <div class="row text-center">
                  统计所有商品状态
                  <div class="col">
                    <PieState style="width: 600px;height: 300px"></PieState>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <hr class="border border-primary border-1 opacity-75">
        <div class="row">
          <div class="col">
            <div class="alert alert-light text-center" role="alert" style="color: black">
              Copyright © 2022  Supermarket-System.
              <br> By team bluepen.
            </div>
          </div>
        </div>
      </ContentBase>

</template>

<script>
import StatisticStateByName from "@/components/Echarts/StatisticStateByName";
import StatisticStateById from "@/components/Echarts/StatisticStateById";
import amountIdState from "@/components/Echarts/amountIdState";
import TopicDataView from "@/components/Echarts/TopicDataView";
import StatisticById from "@/components/Echarts/StatisticById";
// import pieState from "@/components/Echarts/PieState";
import ContentBase from "@/components/ContentBase";
import PieState from "@/components/Echarts/PieState.vue";
export default {
  name: "StatisticView",
  components: {
      PieState,
    StatisticStateByName,
    StatisticStateById,
    amountIdState,
    StatisticById,
    TopicDataView,
    ContentBase,
    // pieState,
  },
  setup() {
    return{
    }
  }


}
</script>

<style scoped>
button{
  text-decoration: none;
  color: black;
}

</style>
